<template>
	<div class="per-edit">
		<van-cell-group>
			<van-cell title="用户姓名" required title-class="cell-value" use-label-slot>
				<div slot="label" class="per-value">
					{{ form.personName }}
				</div>
			</van-cell>
			<van-cell title="手机号码" required title-class="cell-value" use-label-slot>
				<div slot="label" class="per-value">
					{{ form.personName }}
				</div>
			</van-cell>
			<van-cell title="所在银行" required title-class="cell-value" use-label-slot>
				<div slot="label" class="per-value">
					{{ form.personName }}
				</div>
			</van-cell>
			<van-cell title="所在分支行" required title-class="cell-value" use-label-slot>
				<div slot="label" class="per-value">
					{{ form.personName }}
				</div>
			</van-cell>
			<van-cell title="用户角色" required title-class="cell-value" use-label-slot>
				<div slot="label" class="per-value">
					{{ form.personName }}
				</div>
			</van-cell>
			<van-cell title="用户标签（可多选）" title-class="cell-value" use-label-slot>
				<div slot="label">
					<van-checkbox-group v-model="form.classify" direction="horizontal">
						<van-checkbox icon-size="14" name="01" class="checkBox">普惠业务</van-checkbox>
						<van-checkbox icon-size="14" name="02" class="checkBox">大中型企业</van-checkbox>
						<van-checkbox icon-size="14" name="03" class="checkBox">国际业务</van-checkbox>
						<van-checkbox icon-size="14" name="04" class="checkBox">知识产权质押业务</van-checkbox>
						<van-checkbox icon-size="14" name="05" class="checkBox">其他</van-checkbox>
					</van-checkbox-group>
				</div>
			</van-cell>
			<van-cell title="银行系统工号" required title-class="cell-value" use-label-slot>
				<div slot="label" class="per-value">
					{{ form.personName }}
				</div>
			</van-cell>
			<van-cell title="是否参与银企对接走访" required title-class="cell-value" use-label-slot>
				<div slot="label" class="per-value">
					<van-switch v-model="form.isBankjoint" disabled size="18px" />
				</div>
			</van-cell>
			<van-cell title="银行系统工号" required title-class="cell-value" use-label-slot>
				<div slot="label" class="per-value">
					<van-checkbox-group v-model="form.BankjointType" direction="horizontal">
						<van-checkbox icon-size="14" name="1" class="checkBox">企业</van-checkbox>
						<van-checkbox icon-size="14" name="2" class="checkBox">个体工商户</van-checkbox>
					</van-checkbox-group>
				</div>
			</van-cell>
			<van-cell title="名片/工牌照片" required title-class="cell-value" use-label-slot>
				<div slot="label" class="per-value"></div>
			</van-cell>
		</van-cell-group>
		<div class="btn_box">
			<van-button type="warning" style="width: 125px" round>删除</van-button>
			<van-button type="info" style="width: 225px" round>确认修改</van-button>
		</div>
	</div>
</template>
<script>
	import { query_user_info } from '@/interfaces/marketingExtension';
	export default {
		name: 'perEdit',
		/*1. Vue扩展 */
		extends: '', // extends和mixins都扩展逻辑，需要重点放前面
		mixins: [],
		components: {},
		/* 2. Vue数据 */
		props: {},
		model: { prop: '', event: '' }, // model 会使用到 props
		data() {
			return {
				form: {
					personName: '张聪',
					classify: [],
					BankjointType: [],
					isBankjoint: true,
				},
			};
		},
		computed: {},
		watch: {}, // watch 监控的是 props 和 data，有必要时监控computed
		/* 3. Vue资源 */
		filters: {},
		directives: {},
		/* 4. Vue生命周期 */
		created() {
			this.getDetails();
		},
		mounted() {},
		destroy() {},
		/* 5. Vue方法 */
		methods: {
			async getDetails() {
				const params = {
					userId: this.$route.query.userId,
				};
				const res = await query_user_info(params);
				console.log(res, 'query_user_info');
			},
		}, // all the methods should be put here in the last
	};
</script>
<style scoped lang="scss">
	.per-edit {
		position: relative;
		.cell-value {
			font-size: 15px;
			font-family: Alibaba PuHuiTi;
			font-weight: 400;
			color: #888888;
		}
		.per-value {
			font-size: 16px;
			font-family: Alibaba PuHuiTi;
			font-weight: 400;
			color: #2c2c2c;
		}
		.checkBox {
			margin-top: 4px;
			font-size: 14px;
			font-family: Alibaba PuHuiTi;
			font-weight: 400;
			color: #2c2c2c;
		}
		.btn_box {
			display: flex;
			justify-content: space-between;
			padding: 25px 18px;
		}
	}
</style>
